<!-- 
  @name: 蓄注管理(记录)
  @date: 2020.3.11
 -->
<template>
	<view class="content">
		<!-- 顶部区域 -->
		<view class="total fixed_top">
			<view class="item">
				<view class="num">{{totalFillNum}}</view>
				<view class="note">蓄注总量(吨)</view>
			</view>
			<view class="select_btn" @tap="openCloseDate">
				<text>日期筛选</text>
				<view class="_triangle" :class="showPopup ? 'atop' : 'abtm'"></view>
				<view class="date-content">
					<view>{{startTime}}</view>
					<view>{{endTime}}</view>
				</view>
			</view>
		</view>
		
		<!-- 日期筛选弹窗 -->
		<date-select
			top="140"
			:show="showPopup"
			:start="startTime"
			:end="endTime"
			@submit="onSubmit"
			@cancle="onCancle">
		</date-select>
		
		<!-- 列表 -->
		<view class="listview" :class="!isMacrec && userMain === 1 ? '' : 'm1'">
			<view
				class="list-card"
				v-for="(item, index) in lists"
				:key="item.recordId"
				@tap="$navigateTo('./details?recordId=' + item.recordId)">
				<view class="line lt">
					<text class="left text_over">{{item.macName}}</text>
					<text class="num">{{item.recordTime}}</text>
				</view>
				<view class="line">
					<text class="left">蓄注量</text>
					<text class="num">{{item.recordNum}}吨</text>
				</view>
				<view class="line">
					<text class="left">供应商</text>
					<text class="text_over" v-if="item.operatorName">{{item.operatorName}}</text>
					<text v-else>--</text>
				</view>
			</view>
			<!-- 底部加载提示 -->
			<btm-load></btm-load>
		</view>
		
		<!-- 添加蓄注记录 -->
		<view class="fixed_bottom" v-if="!isMacrec">
			<view class="_btn" @tap="$navigateTo('./add')">添加蓄注记录</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPopup: false,  //是否显示日期筛选图层
				startTime: '',  //开始日期-提交
				endTime: '',  //结束日期-提交
				lists: [],  //列表
				page: 1,  //页码
				totalFillNum: '-',  //蓄注总量
				userMain: -1,  //账号权限，0-子账号，1-主账号，2-加注站职员
				isMacrec: false,  //是否为加注机蓄注记录
				machineId: '',  //加注机id
			}
		},
		onLoad(e) {
			this.machineId = e.machineId;
			this.isMacrec = e.machineId ? true : false;
			this.userMain = this.$store.state.userMain;
			this.startTime = this.$getStartDay();
			this.endTime = this.$getToday();
			this.getList();
			uni.$on('setFill_addFillRec', this.addFillRec);
		},
		onShow() {
			if(this.$store.state.reLogin) {
				this.userMain = this.$store.state.userMain;
				this.addFillRec();
				this.$store.commit('hasLogin');
			}
		},
		onUnload() {
			uni.$off('setFill_addFillRec', this.addFillRec);
		},
		onReachBottom() {
			this.$store.commit('btmLoad', true);
			this.getList();
		},
		onPullDownRefresh() {
			this.addFillRec();
		},
		methods: {
			//添加了记录
			addFillRec() {
				this.showPopup = false;
				this.endTime = this.$getToday();
				this.startTime = this.$getStartDay();
				this.hasSelect();
			},
			//筛选过
			hasSelect() {
				this.page = 1;
				this.lists = [];
				this.getList();
			},
			//打开/关闭日期筛选弹窗
			openCloseDate() {
				this.showPopup = !this.showPopup;
			},
			//确认日期筛选
			onSubmit(start, end) {
				this.showPopup = false;
				this.startTime = start;
				this.endTime = end;
				this.hasSelect();
			},
			//取消日期筛选
			onCancle(bool) {
				this.showPopup = bool;
			},
			//获取列表
			getList() {
				let data = {
					type: 2,
					page: this.page,
					rows: this.$tmp.ROWS_RET,
					startTime: this.startTime,
					endTime: this.endTime
				};
				if(this.isMacrec) {
					data.type = 1;
					data.machineId = this.machineId;
				}
				this.$http({
					url: this.$api.recordUrl + 'getfactoryrecordpage',
					data: data,
					loading: this.page > 1 ? 0 : ''
				}).then(res => {
					//将千克转为吨
					this.totalFillNum = this.$operation(res.totalFillNum, '/', 1000);
					let arr = res.lstFillRecord;
					if(arr && arr.length > 0) {
						arr.forEach(item => {
							item.recordNum = this.$operation(item.recordNum, '/', 1000);
						});
						this.lists = this.lists.concat(arr);
						this.page += 1;
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	/* 顶部区域 */
	.total {
		width: 750rpx;
		height: 140rpx;
		padding: 20rpx 30rpx;
		background-color: $color-primary;
		display: flex;
		flex-direction: row;
		align-items: flex-end;
		.item {
			flex: 1;
			.num {
				font-size: 36rpx;
				color: $color-white;
				font-family: $font-family-num;
			}
			.note {
				margin-top: 10rpx;
				font-size: 20rpx;
				color: $color-white;
				opacity:0.8;
			}
		}
	}
	
	/* 列表 */
	.listview {
		width: 750rpx;
		margin-top: 140rpx;
		margin-bottom: $fixed-bottom-heg;
	}
	.listview.m1 {
		margin-bottom: 160rpx;
	}
	.list-card {
		width: 750rpx;
		padding: 30rpx;
		margin-bottom: $spacing-col;
		background-color: $color-white;
		.line {
			width: 100%;
			font-size: 24rpx;
			margin-top: 24rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			.left {
				flex: 1;
				color: $color-grey;
				margin-right: 30rpx;
			}
		}
		.line.lt {
			margin-top: 0;
			margin-bottom: 5rpx;
			.left {
				color: $color-text;
				font-size: $font-size;
			}
		}
		.num {
			font-family: $font-family-num;
		}
	}
	.select_btn {
		width: 160rpx;
		position: relative;
		margin-bottom: -10rpx;
		
		.date-content {
			position: absolute;
			bottom: 55rpx;
			white-space: nowrap;
			> view {
				font-size: 22rpx;
				color: #FFFFFF;
			}
		}
	}
	
	.fixed_bottom {
		border-top: 1rpx solid #EEEEEE;
		height: 160rpx;
	}
</style>
